import React, { useReducer } from 'react'

interface Action {
    value: number,
    type: string
}

export function ReducerGroup () {

    const compute = (counter: number, action: Action): number => {
        switch (action.type) {
            case '+':
                return counter + action.value
            case '-':
                return counter - action.value
            default:
                return counter
        }
    }

    const [ counter, dispatch ] = useReducer<number, [ action: Action ]>(compute, 100)

    return (
        <div className={ 'p-20 bg-slate-500 text-white' }>
            <p className={ '' }>
                { counter }
            </p>
            <div className={'flex gap-5'}>
                <button className={ 'py-3 px-5 bg-purple-500' }
                        onClick={ () => dispatch({ value: 1, type: '+' }) }>
                    +
                </button>
                <button className={ 'py-3 px-5 bg-purple-500' }
                        onClick={ () => dispatch({ value: 1, type: '-' })}>
                    -
                </button>
            </div>
        </div>
    )
}
